<template>
  <div class="monitor_detail">
    <div class="title">
      <p class="tip">{{ DetailList.eventTitle }}-详情</p>
      <!-- <button class="btn" @click="goBack">返回</button> -->
    </div>
    <div class="details">
      <div class="information">
        <p class="titBox">基本信息</p>
        <div class="essential bottom">
          <div class="faultDecriptSummary">
            {{ DetailList.eventTitle }}
          </div>
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="事件单号">
              {{ DetailList.eventNo ? DetailList.eventNo : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件标题">
              {{ DetailList.eventTitle ? DetailList.eventTitle : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件来源">
              {{ DetailList.eventSource ? DetailList.eventSource : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件等级">
              {{ DetailList.eventLevel ? DetailList.eventLevel : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="发生时间">
              {{ DetailList.createTime ? DetailList.createTime : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="事件类型">
              {{ DetailList.eventType ? DetailList.eventType : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属系统">
              {{ DetailList.appSystemName ? DetailList.appSystemName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属中心">
              {{ DetailList.affiliatedCenter ? DetailList.affiliatedCenter : '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="详细描述">
              {{ DetailList.eventDescr ? DetailList.eventDescr : '--' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="technological">
        <p class="titBox">流程记录</p>
        <div class="block" v-if="show">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              type="primary"
              size="large"
              :timestamp="activity.performerTime"
              placement="top"
              :reverse="true"
              color="#007AF5 "
            >
              <el-card class="box-card">
                <div class="text">
                  <span>任务名称</span>
                  <span class="item">{{ activity.taskName }}</span>
                </div>
                <div class="text">
                  <span>操作名称</span>
                  <span class="item">{{ activity.performName }}</span>
                </div>
                <div class="text">
                  <span>处理意见</span>
                  <span class="item">
                    {{ activity.performDesc }}
                  </span>
                </div>
                <div class="text">
                  <span>处理人</span>
                  <span class="item">{{ activity.performerName }}</span>
                </div>
                <div class="text">
                  <span>值班电话</span>
                  <span class="item">{{ activity.performerTel }}</span>
                </div>
                <div class="text">
                  <span>下一步名称</span>
                  <span class="item">{{ activity.nextTaskName }}</span>
                </div>
                <div class="text">
                  <span>下一步操作</span>
                  <span class="item">{{ activity.nextPerformerDesc }}</span>
                </div>
                <div class="text">
                  <span>操作时间</span>
                  <span class="item">{{ activity.performerTime }}</span>
                </div>
              </el-card>

              <!-- <el-card class="box-card">
                                <div v-for="o in 8" :key="o" class="text item">
                                    {{ "列表内容 " + o }}
                                </div>
                            </el-card> -->
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty description="暂无流程" v-if="!show"></el-empty>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { pubflowlist, eventNoDeail } from '../../http/api/monitor';
  const router = useRouter();
  const DetailList = ref('');
  const activities = reactive([]);
  const pageNum = ref('1');
  const pageSize = ref('50');
  const total = ref('');
  const type = ref('');
  const show = ref(true);
  console.log("---------------UnifiedMonitToken---------------------",localStorage.getItem("UnifiedMonitToken"));
  onMounted(() => {
    function getUrlParams(name: string): string | null {  
      const url = window.location.href;  
      const queryString = url.split('?')[1];  
      const urlParams = new URLSearchParams(queryString);  
      return urlParams.get(name);  
    }  
    // const url = window.location.href.split('?')[1];
    // const res = url.split('=')[1];
    type.value = getUrlParams('eventNo')||'';
    //  console.log("------------------------------------");
    //  console.log(localStorage.getItem("UnifiedMonitToken"),res)
    eventNo_Deail();
  });
  const eventNo_Deail = () => {
    eventNoDeail({
      eventNo: type.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        router.push({
          name: 'error'
        });
        return;
      }
      DetailList.value = res.data.data;
      pubflow_list(DetailList.value.eventId);
    });
  };
  const pubflow_list = (value: string) => {
    pubflowlist({
      pageSize: pageSize.value,
      pageNum: pageNum.value,
      bizId: value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      activities.length = 0;
      (activities as any).push(...res.data.data.rows);
      total.value = res.data.data.total;
      if (!total.value) {
        show.value = false;
      }
    });
  };
</script>

<style lang="less" scoped>
  .monitor_detail {
    width: 100%;
    min-height: 100vh;
    // background: rgb(84, 84, 95);
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      height: 34px;
      margin-bottom: 12px;
      .tip {
        line-height: 34px;
        font-size: 14px;
        font-weight: 400;
        color: #46545d;
      }
      .btn {
        width: 80px;
        height: 34px;
        background: #007af5;
        border-radius: 2px;
        color: #fff;
        font-size: 12px;
        border: 0;
      }
    }
    .details {
      display: flex;
      justify-content: space-between;
      .information {
        width: 60%;
        // margin: auto;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }

        .essential {
          // margin-bottom: 40px;
          padding: 20px;
          background: #fff;
          border-radius: 6px;
          .faultDecriptSummary {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #46545d;
            margin-bottom: 20px;
          }
          .el-descriptions {
            :deep(.is-bordered) {
              //border-collapse: separate;
              tbody {
                margin-bottom: 3px;

                .el-descriptions-row {
                  .el-descriptions-item__cell {
                    &.el-descriptions-item__label {
                      background: #fafafa !important;
                      padding: 10px 10px 0;
                      border: 3px solid #fafafa;
                      border-bottom: none;
                      border-right: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #929ea8;
                    }
                    &.el-descriptions-item__content {
                      background: #fafafa !important;
                      padding: 5px 10px;
                      border-left: 3px solid #fafafa;
                      border-top: none;
                      border-right: 3px solid #fff;
                      border-bottom: 3px solid #fff;
                      font-size: 14px;
                      font-weight: 400;
                      color: #46545d;
                    }
                  }
                  :deep(.el-descriptions-item__label) {
                    //margin-right: 3px;
                    background: #fafafa !important;
                    padding: 10px 10px 0;
                  }
                }
              }
            }
          }
        }
      }
      .technological {
        width: 35%;
        .titBox {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #46545d;
          margin-bottom: 20px;
        }

        .el-divider {
          .el-divider__text {
            font-size: 16px;
            line-height: 35px;
          }
        }
        .block {
          .el-timeline {
            width: 80%;
            margin: 0 auto;
            :deep(.el-timeline-item__tail) {
              border: 1px solid #007af5;
            }
            :deep(.el-timeline-item__timestamp) {
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
            }
            :deep(.el-timeline-item__content) {
              color: #fff;
              .box-card {
                border-radius: 10px;
                .el-card__body {
                  .text {
                    min-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    font-weight: 400;
                    color: #929ea8;
                    .item {
                      max-width: 70%;
                      color: #46545d;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
